import type { Metadata } from 'next'
import localFont from 'next/font/local'
import { PropsWithChildren } from 'react'
import { ThemeProvider } from 'next-themes'
import appConfig from '@/config/app.config'
import { getStaticData } from '@/lib/tolgee/tolgee-shared'
import { getLanguage } from '@/features/get-language.action'
import { TolgeeNextProvider } from '@/lib/tolgee/tolgee-client'
import { TanstackQueryProvider } from '@/lib/tanstack-query/tanstack-query-provider'
import './globals.css'

export default async function RootLayout({ children }: PropsWithChildren) {
  const locale = await getLanguage() // # your logic to fetch the specific user locale
  const locales = await getStaticData([appConfig.defaultLanguage, locale])

  return (
    <TolgeeNextProvider locale={locale} locales={locales}>
      <html dir={locale === 'ar' ? 'rtl' : 'ltr'} lang={locale} suppressHydrationWarning>
        <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
          <ThemeProvider
            attribute="class"
            enableSystem
            disableTransitionOnChange
            defaultTheme={appConfig.defaultTheme}
          >
            <TanstackQueryProvider>{children}</TanstackQueryProvider>
          </ThemeProvider>
        </body>
      </html>
    </TolgeeNextProvider>
  )
}

const geistSans = localFont({
  src: './fonts/GeistVF.woff',
  variable: '--font-geist-sans',
  weight: '100 900',
})
const geistMono = localFont({
  src: './fonts/GeistMonoVF.woff',
  variable: '--font-geist-mono',
  weight: '100 900',
})

export const metadata: Metadata = {
  title: 'Nexst',
  description: 'Generated by @samislam/templates-nexst',
}
